<template name="zeroItem">
	<view class="itemBox" @tap="toZeroDetail" data-url="zeroDetail" :data-id="item.id">
		<image :src="item.course.img"></image>
		<view class="infoBox">
			<text class="goodName">{{item.actName}}</text>
			<view class="dressBox">
				<text class="shopName">{{item.course.store.name}}</text>
				<text class="shopName">{{dis}}</text>
			</view>
			<!-- <view class="dressBox">
				<text class="price">￥{{item.course.price}}</text>
				<text class="yuyue">已预约{{item.course.sold}}</text>
			</view> -->
			<view class="opBox">
				<view>
					<text class="fanli">已抢{{item.course.sold}}</text>
				</view>
				<button>0元抢</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import COMM from "@/common/common.js";
	export default {
		name: 'zeroItem', //组件名称
		computed:{
			...mapState({
				locationCity:state=>state.map.locationCity,
				roads:state=>state.map.roads,
			})
		},
		// 传递参数
		props: {
			item: {
				type: Object,
				default: null
			}
		},
		// 组件参数
		data() {
			return {
				dis: '0m'
			}
		},
		// 组件方法
		methods: {
			apiGetDis(){
				let lat1=this.item.course.store.lati;
				let lng1=this.item.course.store.longi;
				let lat2=this.roads.latitude;
				let lng2=this.roads.longitude;
				this.dis=COMM.getDis(lat1,lng1,lat2,lng2);
			},
			toZeroDetail(e){
				uni.setStorageSync('toGood',this.item.course)
				this.toPage(e)
			}
		},
		created() {
			setTimeout(()=>{
				this.apiGetDis()
			},200)
		}
	}
</script>

<style lang="less" scoped>
	.itemBox {
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		display: flex;
		padding: 26upx 20upx;
		border-radius: 10upx;
		margin-bottom: 20upx;
		image {
			width: 230upx;
			height: 230upx;
			border-radius: 10upx;
			flex-shrink: 0;
		}
		.fanli{
			color: #ffb533;
			font-size: 28upx;
		}
		.infoBox {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			padding-left: 16upx;
			justify-content: space-between;

			.goodName {
				font-size: 32upx;
				color: #202932;
				display: block;
				max-height: 88upx;
				overflow: hidden;
			}

			.dressBox {
				padding-top: 30upx;
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				font-size: 24upx;
				color: #aaaaaa;
				align-items: baseline;

				.price {
					font-size: 40upx;
					color: #f93d3d;
					font-weight: bold;
				}

				.price:first-letter {
					font-size: 28upx;
				}

				.yuyue {
					color: #202932;
					// font-weight: bold;
				}
			}

			.opBox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				button {
					width: 208upx;
					height: 50upx;
					line-height: 50upx;
					margin: 0;
					background: linear-gradient(-90deg,#ff4c23 0%,#ff6127 53%,#ff762b 100%);
					border-radius: 25upx;
					border: none;
					padding: none;
					color: #FFFFFF;
					font-size: 28upx;
				}
				button:after{
					border: none;
					outline: none;
					
				}
				>view{
					font-size: 28upx;
				}
			}
		}
	}
</style>
